<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动切换背景颜色</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
        }
    </style>
    
    <style>
        body {
            /* 平滑过渡效果，持续1.5秒 */
            transition: background-color 1.5s ease-in-out;
            min-height: 100vh;
        }
    </style>
</head>
<body class="bg-primary flex flex-col items-center justify-center text-white font-sans">
    <div class="text-center p-6 max-w-md">
        <i class="fa fa-paint-brush text-6xl mb-6 animate-pulse"></i>
        <h1 class="text-[clamp(2rem,5vw,3rem)] font-bold mb-4 text-shadow">背景颜色自动切换</h1>
        <p class="text-xl mb-6 opacity-90">每10秒自动过渡到新的颜色</p>
        <div class="bg-white/20 backdrop-blur-sm rounded-lg p-4">
            <p class="text-white/90">当前颜色: <span id="currentColor" class="font-semibold">蓝色</span></p>
            <p class="text-white/90 mt-2">下次切换: <span id="countdown" class="font-semibold">10</span> 秒</p>
        </div>
    </div>

    <script>
        // 定义一组漂亮的背景颜色
        const colors = [
            { name: "蓝色", code: "#3B82F6" },      // 蓝色
            { name: "绿色", code: "#10B981" },      // 绿色
            { name: "紫色", code: "#8B5CF6" },      // 紫色
            { name: "粉色", code: "#EC4899" },      // 粉色
            { name: "橙色", code: "#F59E0B" },      // 橙色
            { name: "红色", code: "#EF4444" },      // 红色
            { name: "青色", code: "#06B6D4" },      // 青色
            { name: "琥珀色", code: "#FBBF24" }     // 琥珀色
        ];
        
        let currentIndex = 0;
        let countdown = 10;
        let countdownInterval;
        
        // 获取DOM元素
        const body = document.body;
        const currentColorEl = document.getElementById('currentColor');
        const countdownEl = document.getElementById('countdown');
        
        // 更新倒计时显示
        function updateCountdown() {
            countdownEl.textContent = countdown;
            if (countdown <= 0) {
                changeColor();
                resetCountdown();
            } else {
                countdown--;
            }
        }
        
        // 重置倒计时
        function resetCountdown() {
            clearInterval(countdownInterval);
            countdown = 10;
            countdownInterval = setInterval(updateCountdown, 1000);
        }
        
        // 切换到下一个颜色
        function changeColor() {
            // 计算下一个颜色的索引
            currentIndex = (currentIndex + 1) % colors.length;
            const nextColor = colors[currentIndex];
            
            // 应用新颜色
            body.style.backgroundColor = nextColor.code;
            currentColorEl.textContent = nextColor.name;
            
            // 为了更好的视觉效果，根据背景色明暗调整文本颜色
            const isDarkColor = isColorDark(nextColor.code);
            body.classList.toggle('text-white', !isDarkColor);
            body.classList.toggle('text-gray-800', isDarkColor);
        }
        
        // 判断颜色是否为深色（用于文本颜色自适应）
        function isColorDark(hexColor) {
            // 去掉#号
            const hex = hexColor.replace('#', '');
            
            // 转换为RGB值
            const r = parseInt(hex.substring(0, 2), 16);
            const g = parseInt(hex.substring(2, 4), 16);
            const b = parseInt(hex.substring(4, 6), 16);
            
            // 使用相对亮度公式计算
            const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
            
            // 亮度小于0.5的视为深色
            return luminance < 0.5;
        }
        
        // 初始化
        window.onload = () => {
            // 设置初始颜色信息
            currentColorEl.textContent = colors[currentIndex].name;
            
            // 启动倒计时
            resetCountdown();
        };
    </script>
</body>
</html>
